<template>
  <div class="box">
    <div class="condition">
      <div>时间查询</div>
      <div class="block">
        <el-date-picker
          class="picker"
          v-model="Data"
          value-format="yyyy-MM-dd HH:mm"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
        >
        </el-date-picker>
      </div>
      <div>传感器类型</div>
      <div>
        <el-select v-model="Gzm" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div></div>
      <div>
        <el-select v-model="MultipleChoice" multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div><el-button type="warning">查询</el-button></div>
      <div><el-button type="success" plain>重置</el-button></div>
    </div>
    <div class="MultipleChoiceTitle">
      <div>1回风道下梆01#钻孔应力右边点</div>
      <div>1回风道下梆01#钻孔应力右边点</div>
      <div>1回风道下梆01#钻孔应力右边点</div>
      <div>1回风道下梆01#钻孔应力右边点</div>
      <div>1回风道下梆01#钻孔应力右边点</div>
      <div>1回风道下梆01#钻孔应力右边点</div>
      <div>1回风道下梆01#钻孔应力右边点</div>
      <div>1回风道下梆01#钻孔应力右边点</div>
    </div>
    <div
      class="DataComparison"
      id="chartTwo"
      style="width: 100%; height: 460px"
    ></div>
  </div>
</template>
    
    <script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      DataComparison: [],
      MultipleChoice: "",
      Gzm: "",
      Jclx: "",
      Data: "",
      options: [
        { label: "分站一", value: 1 },
        { label: "分站二", value: 2 },
      ],
      tableData: [
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
        {
          a: "1回风道下绑01#钻孔应力深基点",
          b: "5.9",
          c: "MPa",
          d: "正常",
          e: "13",
          f: "41",
          g: "2024-1-31 10:15:07",
        },
      ],
    };
  },
  mounted() {
    this.initChartTwo();
  },
  methods: {
    initChartTwo() {
      var option = {
        legend: {
          // data: ["深基点", "浅基点"],
          textStyle: {
            color: [],
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: 35,
          left: 40,
          right: 30,
          bottom: 35,
        },

        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          name: "",
          type: "category",
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#87CEFA",
            },
          },
          // 设置X轴数据旋转倾斜
          // axisLabel: {
          //   rotate: 30, // 旋转角度
          //   interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
          // },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,
          data: [
            "1回风道下梆#(50.0米)",
            "1回风道下梆#(100.0米)",
            "1回风道下梆#(150.0米)",
            "1回风道下梆#(200.0米)",
            "1回风道下梆#(250.0米)",
            "1回风道下梆#(300.0米)",
          ],
        },

        yAxis: {
          show: true,
          name: "单位：cm",
          type: "value",
          min: 0,
          max: 50,
          splitNumber: 5, // 设置y轴刻度间隔个数
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: "#87CEFA",
              type: "dashed",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#87CEFA",

              type: "dashed",
            },
          },
        },

        series: [
          {
            // name: "深基点",
            data: [30, 20, 36, 10, 37, 23],
            type: "line",
            label: { show: true },
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            // symbol: "none",
            // 设置折线弧度，取值：0-1之间
            // smooth: 0.5,
          },

          {
            // name: "浅基点",
            data: [45, 35, 19, 18, 16, 42],
            label: { show: true },
            type: "line",
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            // symbol: "none",
            // 设置折线弧度，取值：0-1之间
            // smooth: 0.5,
          },
        ],

        color: ["rgb(242,148,85)", "rgb(83,221,249)"],
      };
      const myChart = echarts.init(document.getElementById("chartTwo"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
    
  <style  lang="less"scoped>
.box {
  width: 100%;
  padding: 0 20px;
  .condition {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    > div:nth-child(1) {
      color: white;
      font-size: 14px;
    }
    > div:nth-child(2) {
      margin-left: 7px;
    }
    > div:nth-child(3) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }
    > div:nth-child(4) {
      margin-left: 7px;
    }
    > div:nth-child(5) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }
    > div:nth-child(6) {
      margin-left: 7px;
    }
    > div:nth-child(7) {
      margin-left: 7px;
    }
    > div:nth-child(8) {
      margin-left: 7px;
    }
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  padding: 20px !important;
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
::v-deep .el-table th > .cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}
.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

::v-deep .el-form-item__label {
  color: white !important;
}

.picker {
  height: 40px;
  background-color: rgb(14, 26, 55);
  ::v-deep .el-range-input {
    background-color: rgb(14, 26, 55);
  }
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: rgb(46, 95, 152);
}
.MultipleChoiceTitle {
  width: 100%;
  height: 250px;
//   border: 1px solid red;
  color: white;
  display: flex;
  align-items: center;
    // justify-content: space-between;
  flex-wrap: wrap;
  > div{
    width: 300px;
    height: 30px;
    // border: 1px solid red;
    margin-left: 10px;
  }
}
.DataComparison {
  margin-top: 20px;
}
</style>